<template>
  <div class="list">
    <Menus :title="name" :home="true" />
    <div class="article_list">
      <ul>
        <li v-for="(item,index) in list" :key="'key-list-'+index">
          <router-link :to="'/post/'+item.id">{{item.title}}</router-link>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import Menus from '../components/Menu'
import typename from '../datas/typename'
import api from '../datas/api'
// import axios from 'axios'

export default {
  data() {
    return {
      name: '',
      list: [],
      child_list: 0
    }
  },
  async mounted() {
    const { child_list, includeChild } = this.$route.query
    const { diagramId } = this.$route.params
    const includeQuery = includeChild ? '&include_children=1' : ''
    const res = await this.$get(api.list + diagramId + includeQuery, this)
    this.child_list = child_list || 0
    this.list = child_list ? res.result.data.children : res.result.data.items
    this.name = typename[diagramId]
    console.log(this.list)
  },
  components: {
    Menus
  }
}
</script>
<style lang="scss">
.list {
  padding: 160px 0 200px;
  background: #ddd;
  min-height: 100vh;
  .article_list {
    width: 1200px;
    margin: 55px auto 0;
    background-color: #fff;
    border-radius: 6px;

    ul {
      list-style: none;
      padding: 0;
      li {
        height: 90px;
        font-size: 28px;
        line-height: 90px;
        border-bottom: 1px solid #ddd;
        a {
          color: #333;
          display: block;
          padding: 0 45px;
          height: 90px;
          &:active {
            background-color: #eee;
          }
        }
      }
    }
  }
}
</style>
